<template>
  <div>
    <top-nav></top-nav>
    <div class="app-main">
      <div class="body">
        <el-card class="box-card card" v-for="(item,index) in goodsList" :key="index">
          <div class="img">
            <img :src="item.shop_img" alt="">
          </div>
          <div style="margin: 16px 6px;">
            <span style="color: red; font-size: 20px;">￥{{item.discount_price}}</span>
            <div style="margin-top: 5px; height: 45px;">
              <span slot="reference" class="titleText">{{item.shop_name}}</span>
            </div>
            <div style="margin-top: 15px; height: 15px;">
              <span style="font-size: 13px; color: rgb(153, 153, 153);">有效期：{{item.term_day}}天</span>
            </div>
            <button v-show="item.is_pay==1" @click="buyClass(item.id,item.discount_price)" class="el-button button el-button--text">
              <span>购买</span>
            </button>
            <button v-show="item.is_pay==2" @click="exam(item.id)" class="el-button button el-button--text">
              <span>答题</span>
            </button>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name:'shop-index',
  data:()=>({
    goodsList: []
  }),
  methods:{
    exam(e){
      this.$router.push({ name: 'exam-testing', params: { id:e }})
    },
    async getList(){
      let {data:{code,data}}=await this.$http.post(this.$api.shopList,{})
      if(code==200){
        this.goodsList=data
      }
    },
    //买课
    async buyClass(id,price){
      let params={
        shop_id:id,price:price
      }
      let {data:{code,data}}=await this.$http.post(this.$api.advanceOrder,params)
      if(code==200){
        this.$router.push({
          path:'/order/detail',
          query:{order_num:data}
        })
      }else{
        this.$message.error(data.msg)
      }
    }
  },
  created(){
    this.getList()
  }
}
</script>

<style lang="scss" scoped>
.app-main {
    min-height: calc(100vh - 50px);
    position: relative;
    overflow: hidden;
    .body {
      width: 80%;
      margin: 20px auto 30px;
      .card {
        float: left;
        margin: 6px;
        width: 240px;
        padding-bottom: 10px;
        .img{
          width: 200px;
          height: 200px;
          & img{
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
        .titleText {
          font-size: 14px;
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          line-clamp: 3;
          -webkit-box-orient: vertical;
      }
      .button {
          padding: 10px;
          float: right;
          font-size: 16px;
      }
    }
  }
}
</style>
